<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Web前端技术典型案例实战教学演示目录</title>
</head>

<body>
	<h2>AnimageCC及Createjs演示</h2>
	<h3>案例1:
		<a href="AnimateDemo/CollideTestDemo/Index.html">碰撞测试</a>
	</h3>
	<h3>案例2:
		<a href="AnimateDemo/CoordTestDemo/Index.html">坐标转换测试</a>
	</h3>
    <h3>案例3:
		<a href="AnimateDemo/RandomTestDemo/Index.html">随机抽取测试</a>
	</h3>
	<hr>
	<h2>Web前端技术典型案例实战教学演示目录</h2>
	<h3>案例1演示
		<a href="HtmlGitDemo/CaseDemo/CalDemo/start.html">Axure原型demo </a>&nbsp;
		<a href="HtmlGitDemo/CaseDemo/JavascriptDemo/CalDemo.html">&nbsp;Html5最终demo</a>&nbsp;
		<a href="LastDemo/simpleAdd.html">&nbsp;简单的加法及界面响应</a>
	</h3>
	<p>说明:先利用Axure 进行原型界面设计,然后,根据原型要求,采用Bootstrap的Card、InputGroup等组件技术以及html5 number控件、JQuery技术。45分钟完成一个可随机出题并伴有CSS动画以及Javascript脚本的技术演练。</p>
	<h3>案例2演示
		<a href="HtmlGitDemo/CaseDemo/FixedNavbar/Index.html">demo</a>
	</h3>
	<p>说明:主要采用Bootstrap的Fixed Navbar以及Sticky Navbar布局等技术,45分钟完成一个导航栏布局演练。</p>
	<h3>案例5演示
		<a href="HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-1.html"> demo1</a>
		<a href="HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-2.html"> demo2</a>
		<a href="HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-3.html"> demo3</a>
		<a href="HtmlGitDemo/CaseDemo/BlueLayout/ImgLayout.html"> demo4</a>
	</h3>
	<p>说明:主要采用Bootstrap的Grid网格布局大致模仿一个现成的网站布局。</p>
	<h3>案例4演示
		<a href="HtmlGitDemo/CaseDemo/Layout/Index.html">demo</a>
	</h3>
	<p>说明:在上述的布局代码中填充相关内容模仿一个现成的网站首页布局。用时45分钟。</p>
	<h3>案例6演示
		<a href="HtmlGitDemo/CaseDemo/BootstrapSite-A/Home.html">demo</a>
	</h3>
	<p>说明:主要采用Bootstrap、FontAwesome、WebFont相关技术,20分钟搞定3个简单布局页面。采用程序员终极大法：“复制粘贴”，复制其中的关键代码，快速完成。 </p>
	<h3>案例7演示
		<a href="HtmlGitDemo/CaseDemo/SpringAni/Index.html">demo</a>
	</h3>
	<p>说明:精灵图片一般不需要切割，但需要对于每个序列单元的位置需要坐标定位，spring.png里面有64个序列单元，从第三行采集了16个序列单元作为测试单元。 </p>
</body>

</html>